<template>
  <Panel title="拥堵路段" class="traffic-section-wrapper" v-bind="props.config">
    <ScrollTable
      scroll="calc(100% - 0.34rem)"
      class="table"
      rowKey="describeConcatJamMileage"
      :columns="columns"
      :dataSource="state.list"
      :loading="state.loading"
      @tableClick="handle"
    >
      <template v-slot:jamTypeName="{ text }">
        <span :class="mapJamTypeClass(text)"> {{ text }}</span>
      </template>
    </ScrollTable>
  </Panel>
</template>
<script>
export default {
  name: 'TrafficSection'
}
</script>
<script setup>
/**
 * @desc 拥堵路段 (2级)
 * @auther 邓清波
 * @date 2022/10/20
 * **/
import { reactive, defineEmits, defineProps } from 'vue'
import Panel from '../../components/panel'
import ScrollTable from '../../components/scroll-table'
import trafficApi from '../../api/traffic'
import useWatchStore from '@/hooks/useWatchStore'

const props = defineProps({
  // 详情配置
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const emit = defineEmits(['setDetail'])
const state = reactive({
  list: [], // 表格数据
  loading: false
})
const columns = [
  {
    title: '拥堵情况',
    dataIndex: 'jamTypeName',
    key: 'jamTypeName',
    ellipsis: true,
    align: 'center',
    width: '20%'
  },
  {
    title: '路线名称(桩号范围)',
    dataIndex: 'describe',
    key: 'describe',
    width: '40%',
    ellipsis: true,
    customRender({ value, record }) {
      return (record.road || '') + value
    }
  },
  {
    title: '拥堵时长',
    dataIndex: 'jamTime',
    key: 'jamTime',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '拥堵里程',
    key: 'jamMileage',
    dataIndex: 'jamMileage',
    ellipsis: true,
    align: 'center'
  }
]

useWatchStore(getData)

/**
 * 获取拥堵路段数据
 * **/
function getData(argParams) {
  state.loading = true
  const params = {
    roadType: argParams.roadType,
    province: '32',
    city: argParams.isProvince ? null : argParams.areaCode
  }
  trafficApi
    .getTrafficSituationList(params)
    .then(res => {
      state.list = (res.data || []).map(i => {
        i.describeConcatJamMileage = i.describe + i.jamMileage
        return i
      })
    })
    .catch(() => (state.list = []))
    .finally(() => (state.loading = false))
}

// 拥堵情况字段映射 class
function mapJamTypeClass(value) {
  const level = {
    轻度拥堵: 'slight common',
    中度拥堵: 'moderate common',
    重度拥堵: 'severe common'
  }
  return level[value]
}
/**
 * 列表数据被点击
 * @param {Object} data 数据项
 */
function handle(row) {
  emit('setDetail', {
    type: 'traff-section',
    actions: 'click',
    data: row,
    config: props.config.detailConfig
  })
}
</script>

<style lang="less" scoped>
/deep/ .mz-panel-content-main {
  padding: 8px 5px 0 5px;
}

.common {
  width: 100%;
  height: 18px;
  font-size: 14px;
  line-height: 18px;
  padding: 1px 6px 2px 6px;
  border-radius: 4px;
  color: #fff;
}

.slight {
  background-color: #edaa0a;
}

.moderate {
  background-color: #f57900;
}

.severe {
  background-color: #f53f3f;
}

.table {
  height: 97%;
}

/deep/ .ant-table-tbody {
  overflow-x: hidden;
  font-size: 14px;
}
</style>
